<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
              <el-form-item label="关键词" prop="keyword">
                <el-input v-model="form.keyword" placeholder="根据文章标题搜索"></el-input>
              </el-form-item></el-col>
              <el-col :span="10">
              <el-form-item label="状态" prop="state">
                <el-select v-model="form.state" placeholder="请选择">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
                <el-button size="small" @click="clear">清除</el-button>
                <el-button size="small" type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  style="text-align: right;">
                <el-button type="success"  icon="el-icon-edit"  @click = "openDrawer('add')">新增技巧</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-alert  type="info" show-icon :closable="false">数据一共{{ count }}条</el-alert>
        <el-table :data="list" style="width: 100%">
              <el-table-column
                label="序号"
                width="60">
                <template slot-scope="{$index}">
                  <span>{{ $index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="title"
                label="文章标题"
                width="240">
                <template #default="{ row }">
                  {{ row.title }}
                  <el-link v-if="row.videoURL" icon="el-icon-film" type="primary" @click="videoPreview(row.videoURL)"></el-link>
                </template>
              </el-table-column>
              <el-table-column
                prop="visits"
                label="阅读数">
              </el-table-column>
              <el-table-column
                prop="username"
                label="录入人">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="录入时间" width="200" :formatter="repaced">
              </el-table-column>
              <el-table-column
                prop="state"
                label="状态">
                <template slot-scope="scope">
                  {{ scope.row.state ? '已启用':"已禁用" }}
                </template>
              </el-table-column>
              <el-table-column  label="操作" width="250">
                <template #default="{ row }">
                  <div class="actions">
                    <el-button type="text" @click="openDrawer('preview', row.id )" >预览 </el-button>
                    <el-button type="text" v-if="row.state === 1" @click="changeStates(row.id,row.state)">禁用</el-button>
                    <el-button type="text" v-else @click="changeStates(row.id,row.state)">启用</el-button>
                    <el-button type="text" :disabled="row.state === 1" @click="openDrawer('edit', row.id)">修改</el-button>
                    <el-button type="text" :disabled="row.state === 1" @click="open(row.id)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                @size-change="handlepageSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </div>
      </el-card>

              <el-dialog :title= 'drawerTitle' :visible.sync="isShowDrawer"  :before-close="handleClose" width="52%">
                <div v-if="drawerType === 'preview'" class="article-preview" >
                  <div class="title">
                     <h2>{{ formDetail.title }}</h2>
                     <div>
                      <span>{{ formDetail.createTime }}</span>
                      <span>超级管理员</span>
                      <span><i class="el-icon-view"></i>{{ formDetail.visits }}</span>
                    </div>
                  </div>
                  <div v-html="formDetail.articleBody" class="content"></div>
                </div>

                <el-form  v-else ref="formDetail" label-width="80px" :rules="rules" :model = 'formDetail'>
                   <el-form-item label="文章标题" prop="title">
                     <el-input  v-model="formDetail.title" placeholder="请输入文章标题"></el-input>
                   </el-form-item>
                   <el-form-item label="文章内容" prop="articleBody">
                     <quill-editor v-model="formDetail.articleBody" :options="editorOption" @blur="$refs.formDetail.validateField('articleBody')"></quill-editor>
                   </el-form-item>
                   <el-form-item label="视频地址" prop="videoURL">
                    <el-input  v-model="formDetail.videoURL" placeholder="请输入视频地址"></el-input>
                   </el-form-item>
                   <el-form-item>
                     <el-button type="primary" @click="submit">确认</el-button>
                     <el-button @click = 'closeDrawer'>取消</el-button>
                   </el-form-item>
                 </el-form>
              </el-dialog>
              <div class="videomasks" v-show="videoState == true">
                <div class="btnClose"><el-button type="info" icon="el-icon-close" circle @click="masksCloseFun" ></el-button></div>
                <video :src="videoSrc" controls="controls" autoplay width="100%" height="100%">
                </video>
              </div>
  </div>
  </div>
</template>

<script>
import { list, changeState, detail, add, update, remove } from '@/api/hmmm/articles'
import { parseTime } from '@/utils/index'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// import { status } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      form: {
        keyword: '',
        state: null
      },
      count: 0,
      list: [],
      pageSize: 10,
      isDisabled: false,
      current: 1,
      drawerType: '',
      drawerId: '',
      isShowDrawer: false,
      videoSrc: '',
      videoState: false,
      formDetail: {
        title: '',
        articleBody: '',
        videoURL: '',
        visits: '',
        createTime: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      },
      // -- 配置富文本编辑
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ script: 'sub' }, { script: 'super' }], // 上标/下标
              //   [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              //   // [{ font: ['songti'] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ['clean'], // 清除文本格式
              ['image'] // 链接、图片，需要视频的可以加上video
            ]
          }
        }
      }
    }
  },
  components: {
    quillEditor
  },
  created () {
    this.initDate()
  },
  computed: {
    drawerTitle () {
      let title = '大标题'
      if (this.drawerType === 'add') title = '预览文章'
      if (this.drawerType === 'preview') title = '预览文章'
      if (this.drawerType === 'edit') title = '修改面经'
      return title
    }
  },
  methods: {
    videoPreview (videoURL) {
      this.videoSrc = videoURL
      this.videoState = true
    },
    masksCloseFun () {
      this.videoState = false
    },
    clear () {
      this.form.keyword = ''
      this.form.state = null
      this.initDate()
    },
    async search () {
      if (!this.form) return
      this.initDate()
    },
    async submit () {
      if (this.drawerType === 'add') {
        await this.$refs.formDetail.validate()
        await add({ title: this.formDetail.title, articleBody: this.formDetail.articleBody, videoURL: this.formDetail.videoURL })
        this.$message.success('添加成功')
      } else {
        await update({
          id: this.drawerId,
          title: this.formDetail.title,
          articleBody: this.formDetail.articleBody,
          videoURL: this.formDetail.videoURL
        })
        this.$message.success('修改成功')
      }
      this.current = 1
      this.closeDrawer()
      this.initDate()
    },
    async initDate () {
      const res = await list({ page: this.current, pagesize: this.pageSize, keyword: this.form.keyword, state: this.form.state })
      this.list = res.data.items
    },
    handleCurrentChange (value) {
      this.current = value
      this.initDate()
    },
    handlepageSizeChange (value) {
      this.pageSize = value
      this.initDate()
    },
    async changeStates (id, state) {
      const states = state ? 0 : 1
      await changeState({ id, state: states })
      this.initDate()
      this.$message.success('操作成功')
    },
    async preview (id) {
      const res = await detail({ id })
      this.formDetail = res.data
      this.formDetail.createTime = parseTime(res.data.createTime)
    },
    openDrawer (type, id) {
      if (type === 'edit' || type === 'preview') {
        this.preview(id)
      }
      this.drawerId = id
      this.drawerType = type
      this.isShowDrawer = true
    },
    closeDrawer () {
      this.$refs.formDetail.resetFields()
      this.isShowDrawer = false
    },
    handleClose () {
      this.$confirm('确认关闭？')
        .then(() => {
          this.formDetail = { title: '', articleBody: '', videoURL: '' }
          if (this.drawerType !== 'preview') {
            this.closeDrawer()
          }
          this.isShowDrawer = false
        })
        .catch(() => {})
    },
    async open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.initDate()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    repaced (cellValue) {
      return parseTime(cellValue.createTime)
    }
  }

}
</script>
<style scoped lang="scss">

.title span {
    margin-left: 10px;
    margin-top: 10px;
}
.el-button--default{
  margin-left: 10px;
}
i{
  margin-right: 5px;
}

.videomasks {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9999;
}
.mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9999;
}
.btnClose{
  display: flex;
  justify-content: center;
}
.title{
  border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}
.content{
  background: #f5f5f5;
    padding: 10px
}
.quill-editor {
  ::v-deep .ql-editor {
    height: 300px;
  }
}
</style>
